<template>
  <div id="app">
      <nav class="nav_bar" v-if="$route.query.noNav == undefined">
          <div class="nav_bar_box">
              <img class="logo" src="./assets/image/logo.png" alt="">
              <div class="nav_link">
                  <router-link :class="{'active': this.$route.path == '/'}" to="/">首页</router-link>
                  <router-link :class="routerActive('/join')" to="/join">成为合作伙伴</router-link>
                  <router-link :class="routerActive('/news')" to="/news">新闻资讯</router-link>
                  <router-link :class="routerActive('/about')" to="/about">关于小二哥</router-link>
              </div>
          </div>
      </nav>

      <transition :name="transitionName">
          <router-view class="child-view"></router-view>
      </transition>

      <footer class="footer">
          <div class="left">
              <div class="row">
                  <span>地址：青岛城阳区蔚蓝创新天地1号楼</span>
                  <span>电话：400-880-6604</span>
              </div>
              <ul>
                  <li>版权公告 © 2020-2021 小二哥科技网络有限公司及其关联公司及特许人版权所有。</li>
                  <li>备案号：鲁ICP备2020035196号-2网络文化经营许可证：鲁网文【2021】0701-015号。</li>
              </ul>
          </div>
          <div class="right" v-if="$route.query.noNav == undefined">
              <img src="./assets/image/qr_code.png" alt="">
              <span>扫码关注公众号</span>
          </div>
      </footer>
  </div>
</template>
<script>

export default {
  components: {
  },
  data() {
      return {
          transitionName: 'slide-left' 
      };
  },
  //监听路由的路径，可以通过不同的路径去选择不同的切换效果 
  watch: {
      '$route' (to, from) {
          //    console.log('现在路由:',to.path.split('/')[1],'来自路由:',from.path.split('/')[1],'现在的动画:',this.transitionName)
          const toDepth = to.path.split('/').length
          const fromDepth = from.path.split('/').length
          this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      }
  },
  created() {},
  mounted() {
      
  },
  methods: {
      routerActive(str){
          return this.$route.path.includes(str) ? 'active' : ''
      }
  },
};
</script>
<style lang="less">
html,
body {
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  user-select: none;
}

body {
  border-top: 1px solid transparent;
  margin-top: -1px;
  position: relative;
  min-width: 320px;
  font-size: 17px;
  background-color: #fff;
  color: #1d1d1f;
  overflow: auto;
}

img {
  width: 100%;
}

.nav_bar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  // min-width: 1920px;
  height: 100px;
  user-select: none;
  background: #FFCF00;
  display: flex;
  justify-content: center;
  align-items: center;

  .nav_bar_box {
    width: 1920px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      height: 51.49551010131836px;
      width: 159.37612915039062px;
      margin-left: 184px;
      margin-right: 100px;
    }

    .nav_link {
      // min-width: 450px;
      min-width: 835px;
      margin-right: 220px;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      a {
        color: inherit;
        text-decoration: none;

        &.active {
          position: relative;

          &::after {
            content: '';
            width: 58px;
            height: 3px;
            display: inline-block;
            background: #000000;
            border-radius: 6px;
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translate3d(-50%, 0, 0);
          }
        }
      }
    }
  }
}

.footer {
  width: 1920px;
  height: 200px;
  background: #FFCF00;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin: 0 auto;

  .left {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 225px;

    .row {
      display: flex;
      align-items: center;
      margin-bottom: 35px;

      span {
        display: inline-block;
        margin-right: 55px;
        font-size: 20px;
      }
    }

    ul {
      li {
        font-size: 20px;
        line-height: 28px;
      }
    }
  }

  .right {
    height: 100%;
    margin-right: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 172px;
      height: 172px;
      margin-top: -55px;
      position: relative;
      z-index: 10;
    }

    span {
      font-weight: 500;
      font-size: 20px;
      line-height: 29px;
      display: flex;
      align-items: center;
      text-align: center;
      letter-spacing: 10.5px;

      color: #0E0E0E;
      margin-top: 13px;
    }
  }
}

.child-view {
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(30px, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-30px, 0);
}</style>
